<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-01-14 13:07:10
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-02-09 17:14:00
-->
<template>
  <div>
    <el-dialog
      title="新建任务"
      :visible.sync="dialog.newLoopTaskShow"
      width="50%"
      @close="taskClose"
    >
      <el-form
        :model="taskForm"
        ref="taskForm"
        :rules="taskRules"
        label-position="top"
        :inline="false"
        size="normal"
        class="taskFrom"
        v-if="dialog.newLoopTaskShow"
      >
        <el-form-item label="任务名称" prop="name">
          <el-input
            v-model="taskForm.name"
            placeholder="请输入任务名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目">
          <el-input
            v-model="taskForm.taskProjectName"
            placeholder="请关联项目"
            @focus="proJectFocus"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="userId">
          <el-select v-model="taskForm.userId" placeholder="请选择负责人">
            <el-option
              v-for="item in chargeOptions"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参与者">
          <el-select
            v-model="taskForm.userIds"
            multiple
            placeholder="请选择参与人"
          >
            <el-option
              v-for="item in chargeOptions"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优先级">
          <el-select v-model="taskForm.level" placeholder="请选择优先级">
            <el-option
              v-for="item in priorityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务描述">
          <el-input
            v-model="taskForm.remark"
            placeholder="请输入任务描述"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="任务频次">
          <el-button type="primary" size="default" @click="automation">
            自动化规则
          </el-button>
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            class="upload-demo"
            action="#"
            :on-change="getFile"
            :http-request="requestUpload"
            :on-remove="removeFile"
            accept=".xlsx,.xls.docx,.jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF,.doc"
            multiple
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="相关信息">
          <el-button type="primary" size="default" @click="relationBns">
            关联业务
          </el-button>
        </el-form-item>
        <el-form-item> </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="dialog.newLoopTaskShow = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </span>
    </el-dialog>
    <!-- 任务位置 -->
    <el-dialog title="任务位置" :visible.sync="taskLocationShow" width="30%">
      <el-form
        :model="taskForm"
        ref="taskrm"
        :rules="taskXm"
        label-position="top"
        v-if="taskLocationShow"
      >
        <el-form-item label="项目" prop="taskProjectId">
          <el-select
            v-model="taskForm.taskProjectId"
            placeholder="请选择项目"
            clearable
            filterable
            @change="orderChange"
            style="width: 330px"
          >
            <el-option
              v-for="item in projectOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务清单" prop="taskProjectOrderId">
          <el-select
            v-model="taskForm.taskProjectOrderId"
            value-key=""
            placeholder="请选择项目清单"
            clearable
            filterable
            style="width: 330px"
          >
            <el-option
              v-for="item in orderOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="taskLocationShow = false">取消</el-button>
        <el-button type="primary" @click="loctionSubmit">确定</el-button>
      </span>
    </el-dialog>
    <!-- 自动化规则 -->
    <el-dialog title="设置规则" :visible.sync="dialog.cronShow" width="30%">
      <cycle ref="cycleRules"></cycle>
      <span slot="footer">
        <el-button @click="dialog.cronShow = false">取消</el-button>
        <el-button type="primary" @click="cronSubmit">确定</el-button>
      </span>
    </el-dialog>
    <!-- 相关信息 -->
    <relevant-info
      :dialog="dialog"
      :drawerData="drawerData"
      :business="business"
      ref="relevant"
    ></relevant-info>
  </div>
</template>

<script>
import { projectList, orderList } from "@/api/task/dailyTask";
import { addLoopList, editLoopList } from "@/api/task/loopTask";
import { distriBution } from "@/api/registration";
import relevantInfo from "./relevantInfo.vue";
import CronExc from "@/components/cron/cron-custom/index";
import CronDefault from "@/components/cron/cron-default/index";
import Cycle from "./Cycle.vue";
export default {
  components: { relevantInfo, CronExc, CronDefault, Cycle },
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    drawerData: {
      type: Object,
      required: true,
      default: {},
    },
  },
  data() {
    return {
      activeName: "second",
      result: "", // 最终的结果表达式
      // expression: "",

      business: true,
      fileList: [],
      taskLocationShow: false,
      projectOptions: [],
      chargeOptions: [],
      parOptions: [],
      priorityOptions: [
        {
          value: 1,
          label: "高",
        },
        { value: 2, label: "中" },
        { value: 3, label: "低" },
      ],
      taskForm: {
        loop: 1,
        parentId: 0,
        taskProjectId: "",
        taskProjectOrderId: "",
        name: null,
        userId: null,
        userIds: [],
        startTime: null,
        finishTime: null,
        level: null,
        remark: null,
        taskProjectName: null,
        taskName: "",
        holiday: null,
        saturday: null,
        sunday: null,
        taskStartTime: null,
      },
      cycleForm: "",
      files: [],
      projectOptions: [],
      orderOptions: [],
      taskRules: {
        name: [
          {
            required: true,
            message: "请输入任务名称",
            trigger: "blur",
          },
        ],
        userId: [
          {
            required: true,
            message: "请选择负责人",
            trigger: "change",
          },
        ],
      },
      taskXm: {
        taskProjectId: [
          {
            required: true,
            message: "请选择项目",
            trigger: "change",
          },
        ],
        taskProjectOrderId: [
          {
            required: true,
            message: "请选择项目清单",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.getChargeList();
  },
  methods: {
    cronSubmit() {
      if (this.$refs["cycleRules"].cycleForm.type == 1) {
        this.$refs[
          "cycleRules"
        ].cycleForm.rule = `该任务将于每${this.$refs["cycleRules"].cycleForm.interval}天自动创建`;
      } else if (this.$refs["cycleRules"].cycleForm.type == 2) {
        this.$refs[
          "cycleRules"
        ].cycleForm.rule = `该任务将于每${this.$refs["cycleRules"].cycleForm.interval}周的${this.$refs["cycleRules"].specificStr}自动创建`;
      } else if (this.$refs["cycleRules"].cycleForm.type == 3) {
        this.$refs[
          "cycleRules"
        ].cycleForm.rule = `该任务将于每${this.$refs["cycleRules"].cycleForm.interval}月的${this.$refs["cycleRules"].specificStr}自动创建`;
      }
      this.$refs.cycleRules.$refs.cycleForm.validate((valid) => {
        if (!valid) return;
        this.cycleForm = this.$refs.cycleRules.cycleForm;
        this.dialog.cronShow = false;
      });

      console.log(this.cycleForm);
    },

    // 关联业务
    relationBns() {
      this.dialog.aboutShowEject = true;
      this.$nextTick(function () {
        this.dialog.aboutShow = true;
      });
    },
    // 自动化规则
    automation() {
      this.dialog.cronShow = true;
      if (this.drawerData.id) {
        this.$nextTick(function () {
          this.$refs["cycleRules"].cycleForm = this.drawerData.spTaskLoop;
          if (this.drawerData.spTaskLoop.type == 2) {
            this.$refs["cycleRules"].weekChange(
              this.drawerData.spTaskLoop.dateArray
            );
          } else if (this.drawerData.spTaskLoop.type == 3) {
            this.$refs["cycleRules"].mouthChange(
              this.drawerData.spTaskLoop.dateArray
            );
          }
        });
      }
    },
    // 覆盖默认的上传事件
    requestUpload() {},
    getFile(file, fileList) {
      this.files = [];
      fileList.forEach((item) => {
        this.files.push(item.raw);
      });
      console.log(this.files);
    },
    removeFile(file, fileList) {
      for (var i = 0; i < this.drawerData.fileNames.length; i++) {
        if (file.name == this.drawerData.fileNames[i]) {
          this.drawerData.fileNames.splice(i, 1);
        }
      }
      this.files = [];
      fileList.forEach((item) => {
        this.files.push(item.raw);
      });
      console.log(this.files);
    },
    //获取负责人
    getChargeList() {
      distriBution().then((res) => {
        this.chargeOptions = res.data;
      });
    },
    orderChange(val) {
      this.getOrderList(val);
    },
    // 获取项目
    getProjectList() {
      projectList().then((res) => {
        this.projectOptions = res.data;
      });
    },
    // 获取清单
    getOrderList(val) {
      orderList({
        taskProjectId: val,
      }).then((res) => {
        this.orderOptions = res.data;
      });
    },
    // 确定项目选择
    loctionSubmit() {
      this.$refs.taskrm.validate((valid) => {
        if (!valid) return;
        this.projectOptions.forEach((item) => {
          if (this.taskForm.taskProjectId == item.id) {
            this.taskForm.taskProjectName = item.name;
          }
        });
        this.taskLocationShow = false;
      });
    },
    proJectFocus() {
      this.taskLocationShow = true;
      this.getProjectList();
    },
    //   关闭dialog
    taskClose() {
      this.dialog.newTaskShowEject = false;
      this.taskForm = {
        loop: 1,
        parentId: 0,
        taskProjectId: "",
        taskProjectOrderId: "",
        name: null,
        userId: null,
        userIds: [],
        level: null,
        remark: null,
        taskProjectName: null,
        taskName: "",
        contacts: [],
        customers: [],
        opportunitys: [],
      };
    },
    //   保存
    onSubmit() {
      this.$refs.taskForm.validate((valid) => {
        if (!valid) return;
        if (this.cycleForm == '') {
          this.$message.info("请设置任务频次！");
        } else {
          let fd = new FormData();
          fd.append("spTask", JSON.stringify(this.taskForm));
          fd.append("spTaskLoop", JSON.stringify(this.cycleForm));
          this.files.forEach((item) => {
            fd.append("files", item);
          });
          if (this.taskForm.id) {
            editLoopList(fd).then((res) => {
              this.$message.success(res.msg);
              this.dialog.newLoopTaskShow = false;
              this.$parent.getList();
            });
          } else {
            addLoopList(fd).then((res) => {
              this.$message.success(res.msg);
              this.dialog.newLoopTaskShow = false;
              this.$parent.getList();
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.taskFrom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  /deep/.el-form-item {
    width: 50% !important;
  }
  /deep/ .el-input__inner {
    width: 330px !important;
  }
  /deep/ .el-textarea__inner {
    width: 330px !important;
  }
}

#changeContab {
  /deep/ .bottom {
    .value {
      display: none;
    }
  }
}
</style>